<template>
    <div class="comMavonEditor">
        <mavon-editor
            v-model="content"
            ref="md"
            codeStyle="monokai"
            @imgAdd="customUploadImg"
            :toolbarsFlag="toolbarsFlag"
            :subfield="subfield"
            :defaultOpen="defaultOpen"
        />
    </div>
</template>

<script>
    import { fileUpload } from '@/api/article'

    import { mavonEditor } from 'mavon-editor';
    import 'mavon-editor/dist/css/index.css';

    export default {
        name: "comMavonEditor",
        props: {
            // 是否显示工具栏
            toolbarsFlag: {
                type: Boolean,
                required:false,
                default:true,
            },
            // 是否 双栏
            subfield: {
                type: Boolean,
                required:false,
                default:true,
            },
            // 显示区域
            defaultOpen:{
                type: String,
                required:false,
                default:'',
            }
        },
        components:{
            mavonEditor,
        },
        data() {
            return {
                content: '',
            }
        },
        methods: {
            setCon(val){
                this.content = val
            },
            getCon(){
                return this.content
            },
            clearCon(){
                this.content = ''
            },
            customUploadImg(filename,imgfile){
                fileUpload(imgfile)
                    .then(res=>{
                        if(Number(res.code)===0){
                            // 上传代码返回结果之后，将图片插入到编辑器中
                            this.$refs.md.$img2Url(filename, res.data.file_url);
                        }else{
                            this.$Alert({ message:res.msg,type:'error' })
                        }
                    })
            },
        },
    }
</script>

<style scoped lang="less">
    .comMavonEditor /deep/ .v-note-wrapper{
        z-index: 0;
    }
</style>
